<template>
  <div style="min-width: 829px">
    <div v-if="$route.path == '/reasonList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
          <el-form-item label="门店：">
              <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                  <el-option
                      v-for="item in shopList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="适用门店:">
            <el-select
              filterable 
              style="width: 200px"
              clearable
              v-model="paging.type"
              placeholder=""
            >
              <el-option label="全部" value="0"> </el-option>
              <el-option label="顾客端" value="1"> </el-option>
              <el-option label="门店端" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="select()" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-plus"
            @click="setRow(1)"
            style="margin-left: auto"
            type="primary"
            >新增</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column
            width="100px"
            label="编号"
            prop="id"
          ></el-table-column>
          <el-table-column  label="适用门店">
              <template slot-scope="scope" >
                <span >{{scope.row.type | typeName}}</span>
            </template>
          </el-table-column>
          <el-table-column  prop="content" label="取消订单原因"> </el-table-column>
          <el-table-column fixed="right" width="109" label="操作">
            <template slot-scope="scope">
              <span @click="setRow(2,scope.row)" class="tab-table-text"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
              <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page.sync="paging.page"
                  :page-size="paging.limit"
                  layout="prev, pager, next, jumper"
                  :total="paging.total">
              </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <el-dialog title="编辑原因" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="适用门店:">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="全部" value="0"> </el-option>
            <el-option label="顾客端" value="1"> </el-option>
            <el-option label="门店端" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编辑原因:">
          <el-input
            v-model="form.content"
            autocomplete="off"
            type="textarea"
            rows="4"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addLabel()" :loading="isSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSubmit:false,
      dialogFormVisible: false,
      recordList: [],
      loading: false,
      paging: {
        type: "", 
        page:1,
        limit:20,
        total:0,//总数
        store_id: ''
      },
      form:{
          type:'',
          content:'',
          id:''
      },
      tableData: [],
      shopList: []
    };
  },
  created() {
      this.GetList()
      this.homegetStore()
  },
   filters:{
        typeName(val){
            switch (val) {
                case 0:
                    val = '全部'
                    break;
                case 1:
                    val = '顾客端'
                    break;
                case 2:
                    val = '门店端'
                    break;
            }
            return val;
        }
    },
  methods: {
    async homegetStore(){
          let {code,data} = await this.$Http.homegetStore();
          if(code){
              this.shopList = data;
          }
      },
     handleCurrentChange(val){
          this.paging.page = val;
          this.GetList();
      },
    // 查询
    select() {
      // if (!this.paging.type) {
      //   this.utils.message("适用门店不能为空！");
      //   return false;
      // }
      this.GetList();
    },
    async setRow(type, row,) {
        if(type == 1){
             this.utils.goUrl(`/addReson?title=新增原因`);
        }else if (type == 2) {
            this.dialogFormVisible = true;
            this.form.type = JSON.stringify(row.type);
            this.form.content = row.content;
            this.form.id = row.id
      }
    },
    // 添加标签
    async addLabel(type, params) {
      if (!this.form.content) {
        this.utils.message("评价标签名称不能为空！");
        return false;
      }
      if (!this.form.type) {
        this.utils.message("适用门店不能为空！");
        return false;
      }
      this.isSubmit =  true
      let { code, data } = await this.$Http.setCancel(this.form);
      if (code) {
        if (this.form.id) {
          this.$message.success("编辑成功");
        } else {
          this.$message.success("添加成功");
        }
        this.GetList();
        this.dialogFormVisible = false;
        this.form = this.$options.data().form;
        this.isSubmit =  false
      }
    },
    // 获取标签列表
    async GetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getCancel(this.paging);
      this.loading = false;
      if (code) {
         this.tableData = data.data;
         this.paging.total = data.total;
      }
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false;
      this.form = this.$options.data().form;
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.GetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>